<template>
  <div class="warp-box">
    <el-row class="search-box" style="margin-top: 30px;">
      <el-col :span="24">
        <div class="search-div">
          <span class="search-btn backred" @click="handleDeleteAll">删除</span>
        </div>
        <div class="search-div">
          <span class="search-title">状态</span>
          <el-select
            style="width:100px;"
            v-model="status"
            placeholder="请选择状态"
            size="small"
            class="search-input"
          >
            <el-option
              v-for="item in stateData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="search-div">
          <el-input style="width:266px;" v-model="name" placeholder="请输入名称"></el-input>
        </div>
        <div class="search-div">
          <span class="search-btn backorgin" @click="search">搜索</span>
        </div>
        <div class="search-div" style="float:right">
          <!-- <el-button type="primary" icon="el-icon-circle-plus-outline">搜索</el-button> -->
          <span class="search-btn backorgin" @click="handleAdd">
            <i class="element-icons icon-icon02" style="font-size:20px;"></i>
            添加素材
          </span>
        </div>
      </el-col>
    </el-row>
    <div class="main-box channel1234">
      <div class="inforlist" v-cloak>
        <el-table
          :data="dataList"
          style="margin-top:20px;font-size:16px;"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" width="100" fixed="left"></el-table-column>
          <el-table-column prop="name" label="名称" width="180"></el-table-column>


          <el-table-column prop="redirectUrl" label="链接" >
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.url" placement="top">
                <span class="no-white" v-text="scope.row.url"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template slot-scope="scope">
              <div style="color:#f00;" v-if="scope.row.status === 0">下线</div>
              <div style="color:#34abb5;" v-if="scope.row.status === 1">上线</div>
            </template>
          </el-table-column>
          <el-table-column prop="memo" label="备注">
              <template slot-scope="scope">
              <el-tooltip :content="scope.row.memo" placement="top">
                <span class="no-white" v-text="scope.row.memo"></span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <span>
                <i
                  @click="handleModify(scope.row)"
                  style="color:#34abb5;font-size:22px;cursor:pointer;margin-right:10px;"
                  class="element-icons icon-genggai"
                ></i>
                <i
                  @click="handleDelete(scope.row)"
                  style="color:#eb6338;font-size:25px;cursor:pointer"
                  class="element-icons icon-picture-delet"
                ></i>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pages-box">
          <div style="text-align:center;margin-top:20px;">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="start"
              :page-size="limit"
              layout="total, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      name: "",
      start: 0,
      limit: 5,
      total: 0,
      status: "",
      stateData: [
        { value: "", label: "不限制" },
        { value: "1", label: "上线" },
        { value: "0", label: "下线" }
      ],
      dataList: [],
      ids: [],
      multipleSelection: []
    };
  },
  methods: {
    handleCurrentChange(val) {
      //页码切换
      var that = this;
      that.start = val;
      that.render();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = []
      val.forEach(row => {
        this.ids.push(row.id);
      });
    },
    handleAdd() {
      this.$router.push({ name: "matter_add" });
    },
    render() {
      this.loading = true;
      this.$axios
        .get("/tx/h5/material/list", {
          start: this.start,
          limit: this.limit,
          name: this.name,
          status: this.status
        })
        .then(res => {
          if (res.code === 10200) {
            this.dataList = res.data.list;
            this.total = res.data.count;
          }
          setTimeout(() => {
            this.loading = false;
          }, 200);
        });
    },
    handleDeleteAll() {
      let num = this.multipleSelection.length;
      if (num === 0) {
        this.$alert("请至少选择1个素材", "提示");
      } else {
        this.$confirm("真的删除所选" + num + "个素材吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$axios
              .post("/tx/h5/material/delete", {
                ids: this.ids.join(",")
              })
              .then(res => {
                if (res.code === 10200) {
                  this.render();
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    handleDelete(row) {
      //删除
      this.$confirm("真的删除" + row.name + "吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.get("/tx/h5/material/delete/" + row.id).then(res => {
            if (res.code === 10200) {
              this.render();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleModify(row) {
      this.$router.push({
        name: "matter_add",
        query: {
          id: row.id
        }
      });
    },
    search() {
      //查询
      this.start = 0;
      this.render();
    }
  },
  mounted() {
    this.render();
  }
};
</script>
